<template>
	<view class="page-content" :style="{backgroundColor: globalStyle.globalBgColor}">
		<view class="page-header">
			<view class="flex shop-info" :style="[headerStyle]">
				<text class="shop-name" v-if="!headerStyle.hideShopName"> {{headerStyle.shopName}}</text>
			</view>
			<dec-search v-if="searchModule && searchModule.content" :content="searchModule.content" />
		</view>
		<scroll-view scroll-y="true" :scroll-top="scrollTop" id="myScroll" class="module-list" @scroll="handleModuleScroll">
			<view class="module-li" v-for="item in moduleList" :key="item.nanoid">
				<decSeparator v-if="item.type === 0" :content="item.content" />
				<decSwiper v-if="item.type === 2" :content="item.content" />
				<decImgAd v-if="item.type === 3" :content="item.content" />
				<decProductGroup v-if="item.type === 4" :content="item.content" />
				<decPositionTab v-if="item.type === 5" :content="item.content" @scroll="handleTabScroll" />
				<decCategory v-if="item.type === 6" :content="item.content" />
			</view>
		</scroll-view>
		<MyCommon />
		<!--通知弹框-->
		<uv-popup ref="noticeDialogRef" round="10rpx" bgColor="none" :closeOnClickOverlay="false">
			<view class="flex flex-column align-center">
				<image :style="{width: dialogConfig.width * 2 + 'rpx', height: dialogConfig.height * 2 + 'rpx'}" :src="dialogConfig.imgUrl" @click="goTarget(dialogConfig)" />
			</view>
			<view class="flex justify-center align-center mt-20">
				<image style="width: 36rpx;" :src="!noticePopDis ? `${imageBaseUrl}gx_no.png` : `${imageBaseUrl}gx_yes.png`" mode="widthFix" @click="handleChangNotice" />
			</view>
			<view class="flex justify-center mt-20">
				<uv-icon name="close-circle" size="55" color="#fff" @click="handleCloseNotice"></uv-icon>
			</view>
		</uv-popup>
	</view>
</template>

<script>
	import { mapState, mapMutations, mapActions } from 'vuex';
	import { getTemplateInfo } from '@/api/home.js';
	import { IMG_BASE_URL } from '@/config/index.js';
	import decSearch from './components/decSearch.vue';
	import decSeparator from './components/decSeparator.vue';
	import decSwiper from './components/decSwiper.vue';
	import decImgAd from './components/decImgAd.vue';
	import decProductGroup from './components/decProductGroup.vue';
	import decPositionTab from './components/decPositionTab.vue';
	import decCategory from './components/decCategory.vue';
	export default {
		data() {
			return {
				noticePopDis: false,
				menuButtonTop: '',
				globalStyle: {},
				headerStyle: {},
				searchModule: {},
				moduleList: [],
				imageBaseUrl: IMG_BASE_URL,
				dialogConfig: {},
				scrollTop: 0,
				price: null,
			}
		},
		computed: {
			...mapState('home', ['menuButtonInfo']),
		},
		components: {
			decSearch,
			decSeparator,
			decSwiper,
			decImgAd,
			decProductGroup,
			decPositionTab,
			decCategory
		},
		methods: {
			...mapMutations('common',['setPageLoading']),
			handleChange() {
				uni.navigateTo({
					url: '/page/changeShop/index'
				})
			},
			//查询模板
			async getIndexTemplateInfo () {
				await getTemplateInfo({type: 0, appType: 0}).then(res => {
					if (res.success && res.data.content) {
						const jsonTmp = JSON.parse(res.data.content);
						const globalConfig = jsonTmp.globalConfig;
						this.dialogConfig = jsonTmp.dialogConfig || {};
						if (globalConfig.headerBgImg) {
							this.headerStyle.background = `url(${globalConfig.headerBgImg}) no-repeat`;
							this.headerStyle.backgroundSize = '100% auto';
						} else {
							this.headerStyle.backgroundColor = globalConfig.headerBackground;
						}
						this.headerStyle.shopName = globalConfig.shopName || '';
						this.headerStyle.hideShopName = globalConfig.hideShopName || false;
						this.headerStyle.color = globalConfig.headerFontColor || '#333';
						this.headerStyle.paddingTop = this.menuButtonInfo.top -6 + 'px';
						this.headerStyle.fontSize = globalConfig.headerFontSize + 'px';
						this.headerStyle.height = this.menuButtonInfo.top + this.menuButtonInfo.height + 6 + 'px';
						const moduleListTmp = jsonTmp.moduleList || [];
						const searchModuleTmp = moduleListTmp.find(item => item.type === 1);
						if (searchModuleTmp) {
							this.searchModule = searchModuleTmp;
						}
						this.moduleList = moduleListTmp.filter(item => item.type !== 1);
						this.$nextTick(() => {
							if(this.dialogConfig.show && !this.noticePopDis) {
								this.$refs.noticeDialog.open();
							}
						})
						
					}
				})
			},
			handleModuleScroll(e) {
				if(this.scrollTop === 10000) {
					this.scrollTop = e.detail.scrollTop
				}
			},
			handleTabScroll(e) {
				if(e.detail.scrollTop > 50) {
					let query = uni.createSelectorQuery()
					query.select('#myScroll').boundingClientRect(res => {
						this.scrollTop = 10000;
					}).exec();
				}
			},
			goTarget(data) {
				if (!data || !data.linkUrl) return
				if (data.linkType === 'linkMini') {
					uni.navigateToMiniProgram({
						appId: data.linkUrl,
						path: '/pages/index/index'
					})
				} else if (data.linkUrl === '/pages/my/my') {
					uni.switchTab({
						url: data.linkUrl
					})
				} else {
					uni.navigateTo({
						url: data.linkUrl
					})
				}
			},
			handleChangNotice() {
				if(!this.noticePopDis) {
					this.noticePopDis = true;
					uni.setStorageSync('noticePopDis', true);
				} else {
					this.noticePopDis = false;
					uni.removeStorageSync('noticePopDis');
				}
			},
			handleCloseNotice() {
				this.$refs.noticeDialogRef.close();
			}
		},
		onLoad() {
		},
		onShow() {
			this.noticePopDis = false;
			this.noticePopDis = uni.getStorageSync('noticePopDis');
			this.getIndexTemplateInfo();
		},
	}
</script>


<style lang="scss" scoped>
	.content-box {
		position: relative;

		image {
			width: 720rpx;
		}

		.pop-price-box {
			position: absolute;
			left: 50%;
			bottom: 30%;
			transform: translateX(-50%);
			color: #fff;

			.pop-price {
				font-size: 80rpx;
			}
		}

		.btn {
			position: absolute;
			width: 350rpx;
			height: 81rpx;
			left: 50%;
			bottom: 73rpx;
			transform: translateX(-50%);
		}
	}

	.page-header {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		align-items: center;

		.shop-info {
			padding-left: 40rpx;
		}

		.shop-name {
			display: inline-flex;
			align-items: center;
			margin-left: 10rpx;
		}
	}

	.module-list {
		display: flex;
		width: 100%;
		flex: 1;
		flex-direction: column;
		overflow-y: auto;

		.module-li {
			display: flex;
			width: 100%;
		}
	}

	.notice-text {
		margin-left: 14rpx;
		color: #fff;
		font-size: 24rpx;
	}
</style>
